/* 点击搜索弹出框并遮罩显示 */
var search = document.querySelector(".search");
var searchmask = document.querySelector(".searchmask");
var search_ipt = document.querySelector(".search_ipt")
function showSearch() {
    search.style.height = 300 + "px";
    search_ipt.style.display = "block";
    searchmask.style.display = "block";
}
function delBtn() {
    search.style.height = 0 + "px";
    search_ipt.style.display = "none";
    searchmask.style.display = "none";
}
function searchBtn() {
    //点击搜索按钮调转页面
    location.href = "../html/allgoods.html";
}
/* 购物袋 */
var bag=document.querySelector(".bag");
var car=document.querySelector(".car");
var pont=document.querySelector(".pont");
bag.onmousemove=function(){
    car.style.display="block";
    pont.style.display="none";
}
car.onmouseleave=function(){
    car.style.display="none"
    pont.style.display="block";
}
var carbtn=document.querySelector(".car button");
var uid=localStorage.getItem("username");
if(!uid){
    carbtn.onclick=function(){
        location.href="../html/allgoods.html";
    }
}

/* 指引 */
/* var up=document.querySelector(".up");
up.onclick=function(){
    document.documentElement.scrollTop=0;
} */
/* 导航 */
var ulbtn=document.querySelectorAll(".ulbtn");
var ulnav=document.querySelectorAll(".ulnav");
var page=0;
ulbtn.forEach(function(libtn,i){
    var n=0;
    libtn.onclick=()=>{
        if(n==0){
            ulnav[i].style.display="block";
        n=1;
        }else{
            ulnav[i].style.display="none";
            n=0;
        }
        ulnav.forEach(function(v,j){
            if(i!=j){
                v.style.display="none";
                n=0;
            }
        })
        page=i;
    }

})
var navline=document.querySelector(".navline");
var navlist=document.querySelector(".navlist");
navline.onmousemove=function(){
    navlist.style.display="block";
    navline.style.display="none";
}
navlist.onmouseleave=function(){
    navline.style.display="block";
    navlist.style.display="none";
}


/* 登录 */
var login_mask=document.querySelector(".login_mask");
var login_else=document.querySelector(".login_else");
function userLogin(){
    login_mask.style.display="block";
    document.body.style.overflowY="hidden";
    pont.style.display="none";
}
login_else.onclick=function(){
    login_mask.style.display="none";
    pont.style.display="block";
    document.body.style.overflowY="unset";
}
/* 登录ajax */
var signipt=document.querySelectorAll(".login input");
var signbtn=document.querySelector(".login button");
var prompt=document.querySelector(".prompt");
/* 正则判断 */
var isname=0;
signipt[0].onkeyup=function(){
    var res=/^(\w|[\u2E80-\u9FFF]){3,6}$/.test(signipt[0].value);
    if(res){
        isname=1;        
    }else{
        isname=0;
    }
}
var ispassword=0;
signipt[1].onkeyup=function(){
    var res=/^\w{6,12}$/.test(signipt[1].value);
    if(res){
        ispassword=1;
    }else{
        ispassword=0;
    }
}
signbtn.onclick=function(){
    if(isname==1&&ispassword==1){
        var username=signipt[0].value;
        var password=signipt[1].value;
        axios.get(SignApi,{params:{username,password}}).then(function(res){
            console.log(res.data);
            if(res.data.code==0){
                signipt[1].nextElementSibling.innerHTML=res.data.msg;
                prompt.style.display="block";
            }else{
                alert("登录成功");
                localStorage.setItem("username",JSON.stringify(signipt[0].value));
                localStorage.setItem("password",JSON.stringify(signipt[1].value));
                location.reload();
            }
        })
    }else{
        signipt[1].nextElementSibling.innerHTML="请检查用户或密码";
        prompt.style.display="block";
    }
}
/* 显示账户 */
var urname=JSON.parse(localStorage.getItem("username"));
var namespan=document.querySelector(".namespan");
var account=document.querySelector(".account");
var addname=document.querySelector(".addname");
if(urname){
    account.style.display="none";
    namespan.style.display="inline-block";
    addname.innerHTML=urname;
    function exitName(){
        namespan.style.display="none";
        account.style.display="inline-block";
        localStorage.removeItem("username");
        localStorage.removeItem("password");
    }

}else{
    namespan.style.display="none";
    account.style.display="inline-block";
}

/* 获取商品id */
var urlobj=new URLSearchParams(location.search);
var id=urlobj.get("pid");
/* 获取商品详情 */
function goodsDetails(){
    var html="";
    var goodsIntroduce_ul=document.querySelector(".goodsIntroduce_ul");
    var s_box=document.querySelector(".s_box");
    var b_box=document.querySelector(".b_box");
    var listone=document.querySelector(".listone");
    var box_span=document.querySelector(".box_span");
    var addcar=document.querySelector(".addcar");
    axios.get(GoodsId,{params:{id}}).then(function(res){
        var box_p=document.createElement("p");
        box_p.innerHTML=`<img src="${res.data.data.pimg}" alt="">`;
        box_span.parentNode.insertBefore(box_p,box_span);
        b_box.innerHTML=`<img src="${res.data.data.pimg}" alt="">`
        listone.innerHTML=`<img src="${res.data.data.pimg}" alt="">`;
        addcar.innerHTML=` <button onclick="addgoods(${res.data.data.pid})">加入购物车</button>`
        html=`<li class="goodsIntroduce_name">${res.data.data.pname}</li>
        <li class="goodsIntroduce_price">￥${res.data.data.pprice}</li>
        <li class="goodsIntroduce_details">${res.data.data.pdesc}</li>`
        goodsIntroduce_ul.innerHTML=html;
        /* 放大镜 */
class Large{
    constructor(){
    this.sBox = document.querySelector(".s_box");
    this.sImg = document.querySelector(".s_box img");
    this.sSpan = document.querySelector(".s_box span");
    this.bBox = document.querySelector(".b_box");
    this.bImg = document.querySelector(".b_box img");
    // 点击小图切换大图的按钮
    this.li = document.querySelectorAll(".list li");
    }
    addEvent(){
    var that = this;
    this.sBox.onmouseover = function(){
    that.over();
    }
    this.sBox.onmousemove = function(eve){
    var e = eve || window.event;
    that.move(e);
    }
    this.sBox.onmouseout = function(){
    that.out();
    }
    // 切换图片按钮的点击事件：根据布局做出调整
    for(var i=0;i<this.li.length;i++){
    this.li[i].onclick = function(){
     that.sImg.src = this.children[0].src;
     that.bImg.src = this.children[0].src;
    }
    }
    }
    over(){
    this.sSpan.style.display = "block";
    this.bBox.style.display = "block";
    }
    move(e){
    // 计算遮罩层跟随鼠标移动时的left和top
    var l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;
    var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;
    // 边界限定
    if(l<0) l=0;
    if(t<0) t=0;
    if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
    l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
    }
    if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
    t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
    }
    // 设置遮罩层的位置
    this.sSpan.style.left = l + "px";
    this.sSpan.style.top = t + "px";
    // 根据遮罩层移动的距离计算比例
    var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
    var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
    // 根据上一步得到的比例，计算右侧大图要移动的当前值
    this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
    this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
    }
    out(){
    this.sSpan.style.display = "none";
    this.bBox.style.display = "none";
    }
    }
    // 启动
    var l = new Large();
    l.addEvent();
})
}
goodsDetails();

/* 购物车数量 */
var jian=document.querySelector(".jian");
var jia=document.querySelector(".jia");
var goods_num=document.querySelector(".goods_num");
var num=parseInt(goods_num.innerHTML);
jian.onclick=function(){
    if(goods_num.innerHTML==1){
        num=1; 
    }else{
        num--;
    }
    goods_num.innerHTML=num;
};
jia.onclick=function(){
    num++;
    goods_num.innerHTML=num;
}